<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/_AFragment :: head(~{::title})">
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/main.css">
    <script src="../../static/layui/layui.js"></script>
</head>
<body>
<!--头部导航部分-->
<div class="header" th:replace="admin/_AFragment :: topmenu">
    <div class="layui-col-md10">
        <span id="header-font">贫困生资助系统</span>
    </div>
    <ul class="layui-nav layui-col-md2">
        <li class="layui-nav-item" style="float: right">
            <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改信息</a></dd>
                <dd><a href="javascript:;">安全管理</a></dd>
                <dd><a href="javascript:;">退了</a></dd>
            </dl>
        </li>
    </ul>
</div>
<!--主要内容部分-->
<div class="layui-row">
    <!--左侧导航-->
    <ul th:replace="admin/_AFragment :: leftmenu(4)" class="layui-nav layui-nav-tree  layui-col-md2" lay-filter="demo"
        style="height: 662px">
        <li class="layui-nav-item layui-nav-itemed">
            <a href="javascript:;"><i class="layui-icon">&#xe770;</i> 个人中心</a>
            <dl class="layui-nav-child">
                <dd class="layui-this"><a href="javascript:;">主页</a></dd>
                <dd><a href="javascript:;">用户信息</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="#"><i class="layui-icon">&#xe66f;</i>学生信息管理</a></li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe6b2;</i> 用户管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">用户管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe857;</i> 资助管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">资源管理</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item">
            <a href="javascript:;"><i class="layui-icon">&#xe631;</i> 系统管理</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:;">修改密码</a></dd>
            </dl>
        </li>
    </ul>
    <!--右侧内容-->
    <div class="layui-col-md10">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>用户管理</legend>
        </fieldset>
        <!--表格-->
        <div class="demoTable" style="margin-left: 5px">
            姓名：
            <div class="layui-inline">
                <input class="layui-input" name="userNameSearch" id="userNameSearch" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>
        <table class="layui-hide" id="user" lay-filter="demo"></table>
    </div>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<!--弹出层-->
<div class="layui-card" id="outCard" style="display: none;text-align: center;">
    <div id="outCardHead" class="layui-card-header"></div>
    <div id="outCardBody" class="layui-card-body">
        <form class="layui-form" action="#" method="post" lay-filter="form">
            <!--更新时隐藏提交id-->
            <input type="text" hidden name="userId" id="userId">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="text" id="userName" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机</label>
                <div class="layui-input-inline">
                    <input type="tel" id="userPhone" name="userPhone" lay-verify="required|phone"  placeholder="请输入手机" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="userEmail" name="userEmail" lay-verify="email"  placeholder="请输入邮箱" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">身份</label>
                <div class="layui-input-inline">
                    <select name="userRole" id="userRole">
                        <option value="学生" selected>学生</option>
                        <option value="资助管理员">资助管理员</option>
                        <option value="系统管理员">系统管理员</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
<script>
    layui.use('element', function(){
    });
    layui.use('form', function(){
    });
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#user'
            ,url:'/admin/userList'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [ [
                {field:'userName', title: '用户名'}
                ,{field:'userPhone', title: '电话'}
                ,{field:'userEmail', title: '邮箱'}
                ,{field:'userRole', title: '身份', sort: true}
                ,{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
            ] ]
            ,id:'tableReload'
            ,page:true
        });

        var $ = layui.$, active = {
            reload: function(){
                var userNameSearch = $('#userNameSearch');
                //执行重载
                table.reload('tableReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: {
                            userName: userNameSearch.val()
                        }
                    }
                }, 'data');
            }
        };
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                    $.get({
                        url:'/admin/deleteUser?userId='+data.userId,
                        success:function (data) {
                            if (data){
                                layer.msg('删除成功');
                            }else{
                                layer.msg('删除失败');
                            }
                        }
                    });
                });
            } else if(obj.event === 'edit'){
                // layer.alert('编辑行：<br>'+ JSON.stringify(data));
                $("#outCardHead").text("编辑用户信息");
                $("#outCardBody>form").attr("action","/admin/updateUser");
                $("#userId").val(data.userId);
                $("#userName").val(data.userName);
                $("#userPhone").val(data.userPhone);
                $("#userEmail").val(data.userEmail);
                if (data.userRole==="学生"){
                    $("#userRole>option").eq(0).attr("selected",true);
                }
                if (data.userRole==="资助管理员"){
                    $("#userRole>option").eq(1).attr("selected",true);
                }
                if (data.userRole==="系统管理员"){
                    $("#userRole>option").eq(2).attr("selected",true);
                }
                //layui的form,刷新单选框(select)渲染,lay-filter="form"
                layui.form.render('select','form');
                layer.open({
                    title: false,
                    type:1,
                    content: $("#outCard")
                });
            }
        });
        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    //弹出消息
    layui.use('layer', function(){
        var layer = layui.layer;
        var msg = "[[${msg}]]";
        if (msg!=null&&msg!=""){
            layer.msg(msg);
        }
    });
</script>
</html>